<script setup lang="ts">
    import { useUserStore } from '@/stores/user';
    import { judgeDataIsNull,judgeDataIsNotNull} from '@/tools/normal';
    let userStore = useUserStore();

</script>

<template>
    <!-- topbar会根据store.user判断用户信息
      若store.user有值，则显示user的nickName；
             根据store.user判断用户信息
      若store.user没值，则显示login、register
    -->
  <main>
    <div class="bar" v-if=" (judgeDataIsNotNull(userStore.token)) && userStore.userId!=-1">
      <el-dropdown>
        <span class="el-dropdown-link">
          {{(judgeDataIsNotNull(userStore.nickName))?userStore.nickName : "论坛用户" }}
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template >
          <el-dropdown-menu>
            <el-dropdown-item>Action 1</el-dropdown-item>
            <el-dropdown-item>Action 2</el-dropdown-item>
            <el-dropdown-item>Action 3</el-dropdown-item>
            <el-dropdown-item disabled>Action 4</el-dropdown-item>
            <el-dropdown-item divided>Action 5</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div >
    <div  class="bar"  v-else>
      <RouterLink to="/login" >登录</RouterLink>
      <RouterLink to="/register">注册</RouterLink>
    </div>
  </main>
</template>

<style scoped>
  a {
    padding-right: 5px;
  }

  .bar{
    direction: rtl;
  }
</style>
